<template>
	<view class="goods-sku-item-num-input">
		<view class="num-icon" @click="del">
			<image :src="$img_path('/home/detail/num-del.png')" mode="widthFix"></image>
		</view>
		<view class="num-input">
			<text>{{ value }}</text>
		</view>
		<view class="num-icon" @click="add">
			<image :src="$img_path('/home/detail/num-add.png')" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "service-num-input",
		model: {
			prop: 'value', // 指定 v-model 要绑定的参数叫什么名字，来自于 props 中定义的参数
			event: 'input', // 指定要触发的事件名字，将被用于 $emit
		},
		props: {
			value: {
				type: Number
			}
		},
		data() {
			return {

			};
		},
		methods: {
			add() {
				this.$emit("input", this.value + 1)
			},
			del() {
				this.$emit("input", this.value - 1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods-sku-item-num-input {
		display: flex;
		align-items: center;
	}

	.num-icon {
		width: 44.8rpx;
		height: 44.8rpx;
	}

	.num-input {
		width: 68rpx;
		font-weight: 400;
		font-size: 38rpx;
		color: #666666;
		text-align: center;
	}
</style>